<template>
  <div class="container">
    <div id="viewer"></div>
    <div class="custom-navbar">
      <div
        :class="[{ selected: isChecked }, 'item-img-box']"
        v-for="{ name, url, isChecked, id } in imgLists"
        :key="name"
        @click="changeUrl(name, url, id)"
      >
        <img :src="url" :alt="name" class="vr-mini-img" />
        <div class="img-name">{{ name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入插件以及样式
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";

// 导入官方Markers插件以及样式
import { MarkersPlugin } from "photo-sphere-viewer/dist/plugins/markers";
import "photo-sphere-viewer/dist/plugins/markers.css";
export default {
  data() {
    return {
      viewer: "",
      markersPlugin: "",
      imgurl1: require("./assets/images/hp01.jpg"),
      imgurl2: require("./assets/images/hp02.jpg"),
      imgurl3: require("./assets/images/hp03.jpg"),
      viewerHeigth: "90vh",
      imgLists: [
        {
          isChecked: true,
          name: "次卧卧室",
          id: 0,
          url: require("./assets/images/hp01.jpg"),
        },
        {
          id: 1,
          isChecked: false,
          name: "次卧客厅",
          url: require("./assets/images/hp02.jpg"),
        },
        {
          id: 2,
          isChecked: false,
          name: "客厅",
          url: require("./assets/images/hp03.jpg"),
        },
      ],
      markersList: [
        {
          id: "circle",
          tooltip: "A circle of radius 30",
          circle: 30,
          svgStyle: {
            fill: "rgba(255,255,0,0.3)",
            stroke: "yellow",
            strokeWidth: "2px",
          },
          longitude: -1.5,
          latitude: -0.28,
          anchor: "center right",
          type: "link",
        },
      ],
      currentID: 0,
    };
  },
  mounted() {
    this.initViewr();
  },
  methods: {
    initViewr() {
      this.viewer = new Viewer({
        container: document.querySelector("#viewer"),
        panorama: this.imgurl1,
        touchmoveTwoFingers: true,
        mousewheelCtrlKey: true,
        size: {
          width: "100%",
          height: this.viewerHeigth,
        },
        plugins: [
          [
            MarkersPlugin,
            {
              markers: this.markersList,
            },
          ],
        ],
      });

      this.markersPlugin = this.viewer.getPlugin(MarkersPlugin);

      // 监听图片的点击事件
      this.handleMarkers();

      this.markersPlugin.on("select-marker", (e, marker) => {
        console.log(e, marker);
        if (marker.config.type === "marker") return;

        if (marker.config.type === "link")
          this.viewer
            .animate({
              longitude: marker.config.longitude,
              latitude: marker.config.latitude,
              zoom: 100,
              speed: "-2rpm",
            })
            .then(() =>
              this.viewer.setPanorama(this.imgurl2).then(
                () =>
                  this.markersPlugin.updateMarker({
                    id: marker.id,
                    longitude: -1.8,
                    latitude: -0.28,
                  }),
                this.viewer
                  .animate({
                    zoom: 50,
                    speed: "2rpm",
                  })
                  .then(
                    () => (this.imgurl2 = this.imgurl3),
                    console.log("继续操作")
                  )
              )
            );
      });
    },
    // 点击切换场景
    changeUrl(name, url, id) {
      this.currentID = id;
      this.imgLists = this.imgLists.map((item) => ({
        ...item,
        isChecked: item.name === name ? true : false,
      }));

      this.viewer.setPanorama(url, {
        speed: "20rpm",
        position: { yaw: 0, pitch: 0 },
      });
    },
    // 显示提示框
    showPrompt() {
      return prompt("请输入内容：");
    },

    // 标注的点击事件
    handleMarkers() {
      this.viewer.on("click", (e, data) => {
        // return false;
        console.log(e, data);
        const num = 1 + Math.round(Math.random() * 2);

        this.markersPlugin.addMarker({
          id: `mark_${this.currentID}_${Date.now()}`,
          longitude: data.longitude,
          latitude: data.latitude,
          type: "marker",
          tooltip: this.showPrompt(), // 鼠标移上去后的提示信息
          html: `<div class="marker-content-container"></div>`,
        });
      });
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.custom-navbar {
  border: 1px solid red;
  background-color: #22140a;
  display: flex;
  align-items: center;
  /* padding: 10px 20px; */
  height: 10vh;
  box-sizing: border-box;
}

.selected {
  border: 2px solid #2a5ee2;
  transition: all 0.3s;
}

.custom-navbar .item-img-box {
  margin: 0 10px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.item-img-box .vr-mini-img {
  width: 150px;
  height: 100%;
  display: block;
}

.custom-navbar .img-name {
  background-color: #4f50549c;
  padding: 5px;
  position: absolute;
  bottom: 8px;
  left: 8px;
  color: #fff;
  font-size: 10px;
}

.marker-content-container {
  width: 10px;
  height: 10px;
  background-color: #2a5ee2;
  border-radius: 50%;
  border: 5px solid #fff;
}
</style>
